<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除和修改药品</title>
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
	</head>
	<body>
		
		<fieldset class="table-search-fieldset">
		    <legend>搜索信息</legend>
				<div style="margin: 10px 10px 10px 10px">
					<!-- 查询框 -->
					<form class="layui-form layui-form-pane layui-inline" style="width: 600px;">
						<div class="layui-inline">
							<label class="layui-form-label">药品名</label>
							<div class="layui-input-block">
							  <input type="text" name="medName" lay-verify="required" placeholder="请输入药品名" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit=""  lay-filter="demo1">查询</button>
							</div>
						</div>
					</form>
				</div>
		</fieldset>
		
		<table class="layui-hide" id="test" lay-filter="test"></table>
		
		<script type="text/html" id="toolbarDemo">
		  <div class="layui-btn-container">
		    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">添加</button>
		  </div>
		</script>
		
		<!-- 操作栏 -->
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs" lay-event="modify">修改</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		
		<script src="js/jquery-3.4.1.js"></script>
		<script src="layui/layui.js"></script>
		
		
		<script>
			layui.use(['table','form'], function(){
			  var table = layui.table,
			  form=layui.form,
			  $=layui.jquery;
			  
			  tableIn = table.render({
				elem: '#test'
				,url:'http://localhost:8081/query/queryMedicineByName'
				,toolbar: '#toolbarDemo'
				,title: '药品表'
				,id:'medTable'
				,cols: [[
				  {field:'medId', title:'药品编号', width:90, fixed: 'left', unresize: true}
				  ,{field:'medName', title:'药品名', width:120}
				  ,{field:'medIngredient', title:'成分', width:90}
				  ,{field:'medCharacter', title:'性状', width:100}
				  ,{field:'medEffect', title:'功效'}
				  ,{field:'medPrice', title:'药品价格', width:100}
				  ,{field:'medStorage', title:'库存量', width:100}
				  ,{field:'factoryId', title:'药厂编号', width:100}
				  ,{field:'medProDate', title:'生产日期', width:120}
				  ,{field:'medUseDate', title:'有效期', width:120}
				  ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
				]]
				,page: true
			  });
			  
			  // 监听搜索操作
			  form.on('submit(demo1)', function (data) {
				  // layer.alert(JSON.stringify(data.field), {
				  //   title: '最终的提交信息'
				  // });
			  
					//执行搜索重载
					table.reload('medTable', {
						page: {
							curr: 1
						}
						, where: {
							medName : data.field.medName
						}
					}, 'data');
					            
				  return false;
			  });
			  
			  //添加事件监听
			  table.on('toolbar(test)', function (obj) {
				  if(obj.event==='add'){
					  // layer.alert(111);
					  var index = layer.open({
					  	title: '添加药品',
					  	type: 2,
					  	shade: 0.2,
					  	maxmin:true,
					  	shadeClose: true,
					  	area: ['50%', '90%'],
					  	content: './addMed.html'
					  });
				  }
			  });
			  
			  //修改和删除事件监听
			  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			    // layer.alert(111)
				var data = obj.data //获得当前行数据
				,event=obj.event;
				// layer.alert(data.medId);
				if(event==='modify'){
					// layer.alert(111)
					var index = layer.open({
						title: '修改药品信息',
						type: 2,
						shade: 0.2,
						maxmin:true,
						shadeClose: true,
						area: ['60%', '90%'],
						content: './modifyMed.html',
						success: function(layero, index){
							var body = layui.layer.getChildFrame('body', index);
							 body.find("#medId").val(data.medId);
							 body.find("#medName").val(data.medName);
							 body.find("#medIngredient").val(data.medIngredient);
							 body.find("#medCharacter").val(data.medCharacter);
							 body.find("#medEffect").val(data.medEffect);
							 body.find("#medPrice").val(data.medPrice);
							 body.find("#medStorage").val(data.medStorage);
							 body.find("#factoryId").val(data.factoryId);
							 body.find("#date").val(data.medProDate);
							 body.find("#date1").val(data.medUseDate);
						}	
					});
				}else if(event==='del'){
					// alert(1111);
					layer.confirm('你确定删除吗？', function(index){
						 //obj.del(); //删除对应行（tr）的DOM结构
						 layer.close(index);
						 //console.log(data.id)
						 //向服务端发送删除指令
						 $.ajax({
						 	type:"post",
						 	url:"http://localhost:8081/admin/deleteMedicine",
						 	async:true,
						 	contentType:"application/json;charset=UTF-8",
						 	data:JSON.stringify(data),
						 	xhrFields: {
						 		withCredentials: true
						 	},
						 	success:function(res){
						 		// $('input').val("");
						 		//sessionStorage.setItem("userName",res.data);
						 		console.log(res);
						 		layer.msg(res.msg);
								tableIn.reload();
						 	}
						 });
					 });
				}
			  });
			});
		</script>
	</body>
</html>
